<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <title>Hello World|一个漂亮的界面</title>
</head>

<body>
    <div id="page1" class="page1">
        <div class="background">
            <img src="./images/header-bg.png" alt="背景图" class="background-img">
            <div class="moudle"></div>
        </div>
        <h1>Hello World</h1>
        <p class="miaoshu">China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities
            for its smart car industry, Economic Information Daily reported Thursday.</p>
        <div class="placeholder">
            <h2 class="title">Create Your Account</h2>
            <p class="miaoshu">It is absolutely free</p>
            <form action="#">
                <input class="input-field" type="email" name="email" id="email" placeholder="Create your email">
                <input class="input-field" type="password" name="pws" id="pws" placeholder="Create your password">
                <input class="sign-up" type="button" value="Sign Up">
            </form>
        </div>
    </div>
    <div id="page2" class="page2">
        <div class="page2-content">
            <h2 class="title">Boatloads of Awesome</h2>
            <p class="miaoshu">Ready-made, customizable, HTML landing page sections</p>
            <ul class="list">
                <li class="list-item">
                    <i class="icon icon-phone"></i>
                    <div class="list-item-content">
                        <h3>Mobile First</h3>
                        <p>All modulz are built mobile-first for maximum device compatibility.</p>
                    </div>
                </li>
                <li class="list-item">
                    <i class="icon icon-check"></i>
                    <div class="list-item-content">
                        <h3>Accessibility</h3>
                        <p>Support for IE8, mobile and tablet devices, screenreaders and color blind.</p>
                    </div>
                </li>
                <li class="list-item">
                    <i class="icon icon-pencil"></i>
                    <div class="list-item-content">
                        <h3>Fluid Typography</h3>
                        <p>On different screen sizes, fonts automagically scale with the viewport.</p>
                    </div>
                </li>
                <li class="list-item">
                    <i class="icon icon-settings"></i>
                    <div class="list-item-content">
                        <h3>Customization</h3>
                        <p>Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to create the custom look you want.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="page3" class="page3">
        <div class="background">
            <img src="./images/bg2.png" alt="背景图" class="background-img">
            <div class="moudle"></div>
        </div>
        <div class="page3-content">
            <h2 class="title">Supportive policies for China's smart car</h2>
            <p class="page3-text">China will come up with its own smart car standards, traffic rules, laws and regulations relating to safety, according to the China Industry Innovation Alliance for the Intelligent and Connected Vehicles.</p>
            <input class="page3-btn page3-btn1" type="button" value="Check out Features">
            <input class="page3-btn page3-btn2" type="button" value="Try product for Free">
        </div>
        <div class="pad">
            <img src="./images/Screen.png" alt="padcontent" title="san page" class="pad-content">
        </div>
    </div>
    <div id="page4" class="page4">
        <h2 class="title">Try Our Awesome Products</h2>
        <div class="page4-content">
            <div class="item">
                <img src="./images/Singleton.png" alt="Singleton" class="title-logo">
                <div class="text">Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architecture and standards for test grounds.</div>
            </div>
            <div class="item">
                <img src="./images/Hero.png" alt="Hero" class="title-logo">
                <div class="text">Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan ($158.15 billion) and also able to boost fast development in 5G, internet of cars, big data, artificial intelligence and new-energy vehicles.</div>
            </div>
            <div class="item">
                <img src="./images/Portland.png" alt="Portland" class="title-logo">
                <div class="text">Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car industry and China's auto sector will usher in a new key development stage with the improvement of infrastructure, technology, policies and laws.</div>
            </div>
        </div>
    </div>
    <div id="page5" class="page5">
        <div class="page5-content">
            <img src="./images/page5-1.png" alt="鸟" class="page5-img">
            <div class="page5-text">
                <h3 class="title">Learn How to Improve Your Personal Business</h3>
                <p class="content">Li Jun, a China Academy of Engineering academician and also director of the alliance's experts' committee, said that China will also launch design guidance for smart cars, smart map architecture and standards for test grounds.</p>
            </div>
            <div class="page5-text">
                <h3 class="title">Choose Between Two Beautifully Designed Color Schemes.</h3>
                <p class="content">China will come up with its own smart car standards, traffic rules, laws and regulations relating to safety, according to the China Industry Innovation Alliance for the Intelligent and Connected Vehicles.</p>
            </div>
            <img src="./images/page5-2.png" alt="鸟" class="page5-img">
        </div>
    </div>
    <div id="page6" class="page6">
        <h2 class="title">Our Awesome Crew</h2>
        <p class="miaoshu">Our unique online teaching style makes learning easy for everyone. Whether you are trying to land a new job, brush up on your skills.</p>
        <div class="photo-wall">
            <div class="photo-info">
                <img src="./images/Userpic1.png" alt="Userpic">
                <div class="info">
                    <h4>Ethan Dutton</h4>
                    <p>Senior Visual Designer</p>
                    <ul class="social-buttons">
                        <li><a href="#" class="icon icon-facebook"></a></li>
                        <li><a href="#" class="icon icon-instagram"></a></li>
                        <li><a href="#" class="icon icon-twitter"></a></li>
                    </ul>
                </div>
            </div>
            <div class="photo-info">
                <img src="./images/Userpic2.png" alt="Userpic">
                <div class="info">
                    <h4>Ethan Dutton</h4>
                    <p>Senior Visual Designer</p>
                    <ul class="social-buttons">
                        <li><a href="#" class="icon icon-facebook"></a></li>
                        <li><a href="#" class="icon icon-instagram"></a></li>
                        <li><a href="#" class="icon icon-twitter"></a></li>                    </ul>
                </div>
            </div>
            <div class="photo-info">
                <img src="./images/Userpic3.png" alt="Userpic">
                <div class="info">
                    <h4>Ethan Dutton</h4>
                    <p>Senior Visual Designer</p>
                    <ul class="social-buttons">
                        <li><a href="#" class="icon icon-facebook"></a></li>
                        <li><a href="#" class="icon icon-instagram"></a></li>
                        <li><a href="#" class="icon icon-twitter"></a></li>
                    </ul>
                </div>
            </div>
            <div class="photo-info">
                <img src="./images/Userpic4.png" alt="Userpic">
                <div class="info">
                    <h4>Ethan Dutton</h4>
                    <p>Senior Visual Designer</p>
                    <ul class="social-buttons">
                            <li><a href="#" class="icon icon-facebook"></a></li>
                            <li><a href="#" class="icon icon-instagram"></a></li>
                            <li><a href="#" class="icon icon-twitter"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="page7" class="page7">
        <div class="page7-content">
            <form action="#" class="form">
                <h3>Fell free to Write Us</h3>
                <input type="text" class="input-field" placeholder="E-mail">
                <input type="text" class="input-field" placeholder="Subject">
                <textarea class="textarea-field" name="textarea-field" cols="30" rows="10">Message</textarea>
                <input type="button" value="Send" class="button">
            </form>
            <div class="info">
                <h3>Contacts</h3>
                <p>Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to create the custom look you want.</p>
                <div class="contacts">
                    <div class="contacts-item">
                        <i class="icon icon-map"></i><p>360 King Street<br/>Feastrvale Trevose, PA 19057  </p>
                    </div>
                    <div class="contacts-item">
                        <i class="icon icon-tel"></i><p>(755) 564-84-12</p>
                    </div>
                    <div class="contacts-item">
                        <i class="icon icon-email"></i><p>youname@mail.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer id="page8" class="page8">
        <div class="page8-content">
            <div class="menus">
                <div class="menu-item">
                    <h3>Learn More</h3>
                    <ui>
                        <li>How it works?</li>
                        <li>Meeting tools</li>
                        <li>Live streaming</li>
                        <li>Contact method</li>
                    </ui>
                </div>
                <div class="menu-item">
                    <h3>About Us</h3>
                    <ui>
                        <li>About us</li>
                        <li>Features</li>
                        <li>Privacy police</li>
                        <li>Terms & Conditions</li>
                    </ui>
                </div>
                <div class="menu-item">
                    <h3>Support</h3>
                    <ui>
                        <li>F.A.Q.</li>
                        <li>Contact us</li>
                        <li>Live chat</li>
                        <li>Phone call</li>
                    </ui>
                </div>
            </div>
            <div class="socials-info">
                <h3>Enjoy your Life</h3>
                <p>Great web UI kit for designers, freelancers or business.</p>
                <ui class="list">
                    <li><a href="#" alt="me" class="icon icon-twitter"></a></li>
                    <li><a href="#" alt="me" class="icon icon-facebook"></a></li>
                    <li><a href="#" alt="me" class="icon icon-google"></a></li>
                    <li><a href="#" alt="me" class="icon icon-tumbler"></a></li>
                    <li><a href="#" alt="me" class="icon icon-pinterest"></a></li>
                    <li><a href="#" alt="me" class="icon icon-linkedin"></a></li>
                </ui>
            </div>
        </div>
    </footer>
</body>

</html>